/**
 *  目标： 实现一个 通过 函数调用 就可以显示toast的组件
 *      toast(信息,类型)
 *    -1，有一个函数，toast 传入两个参数
 *    -2, 调用函数的时候，如何才能出现弹出层 ? - 循环生成新的div
 *    -3, 怎样才能循环生成新的div ? - 使用一个数组把所有的弹出的数据(信息,类型)存起来
 *    -4, 有了数组，需要在修改数组的时候，同时更新视图 - 响应式数据
 *    -5, 需要一个组件，用来存数组为响应式的数据 ， 循环渲染子组件 --> 需要一个父组件，需要多个子组件作为弹出
 *    -6, 需要调用toast的时候，向数组里面添加一个新的数据 --> 怎样才能给一个组件里面的数据增加新数据 ?
 *    -7, 把父组件做成一个clas组件，调用class的方法进行组件传值
 *    -8, 封装一个函数，实现上述过程
 */

import { createRoot } from "react-dom/client";
import ToastRoot from "./ToastRoot";
import { createRef } from "react";

let div = document.createElement("div");
document.body.append(div);
let root = createRoot(div);
const rootRef = createRef<ToastRoot>();
// 实例化父组件
root.render(<ToastRoot ref={rootRef} />);

// 封装一个函数，传入两个参数
function toast(content: string, type: string) {
  // 向父组件传入数据
  rootRef.current?.add(content, type);
}

export default toast;
